<template>
	<view>
		<uni-card class="container">
			<!-- <uni-title type="h2" align="center" style="padding-top: 0;" title="确认已连接101会议室WIFI后即可开始控制"></uni-title> -->
			<view style="margin-bottom: 3vh;">
				<uni-row>
					<uni-col :span="6" :offset="2" style="padding-top:20rpx">
						<button type="primary" @click="sendAll(1)">一键全开</button>
					</uni-col>
					<uni-col :span="6" :offset="2" style="padding-top:20rpx">
						<button type="primary" @click="sendAll(0)">一键全关</button>
					</uni-col>
						<uni-col :span="4" :offset="2">
							<clock size="100rpx"> </clock>
						</uni-col>
				</uni-row>
			</view>
			<view v-for="deviceType in deviceTypes" :key="deviceType.id" class="container-sub">
				<!-- <uni-title color="#666666"  type="h3" align="left" style="padding-top: 0;" :title="deviceType.typeName"></uni-title> -->
				<uni-row>
					<uni-col v-for="device,index in deviceType.devices" :key="device.id"
						:span="(24/deviceType.devices.length)-2" :offset="index%4==0?1:2">
						<uni-title  color="#666666" align="center" type="h3" :title="device.deviceName"></uni-title>
						<uni-row>
							<view v-for="codeType in codeTypes[deviceType.id]" :key="codeType.id">
								<uni-col style="margin-bottom: 5vh;" v-for="code,i in codeType.codes" :key="code.id"
									:span="codeType.codes.length>4?4:(24/codeType.codes.length)-2" :offset="i%4==0?1:2">
									<button type="primary"
										@click="sendCode(device.id,code.id)">{{code.codeName}}</button>
								</uni-col>
							</view>
						</uni-row>
					</uni-col>
				</uni-row>
			</view>
		</uni-card>

	</view>
</template>

<script>
	import Clock from 'vue-clock2';
	export default {
		 components: { Clock },
		data() {
			return {
				positionId: 1,
				deviceTypes: [{
					id: 0,
					typeName: "空调",
					typeEnumId: 0,
					verifyEnumId: 0,
					verifyEnumId: 0,
					needTransHex: false,
					devices: [{
						id: 0,
						deviceName: '设备名1',
						positionId: 0
					}]
				}],
				codeTypes: {
					0: [{
						"id": 5,
						"typeName": "开、关",
						"order": 0,
						"version": 0,
						"codes": [{
							"id": 2,
							"codeName": "开",
							"visible": false,
							"sendCode": "发送指令设置",
							"order": 0,
							"isHex": null,
							"dataCount": 0,
							"version": 0,
							"toOpen": 0,
							"logs": null
						}],
						"parentId": null,
						"deleted": false
					}]
				}
			}
		},
		methods: {
			async getDeviceTypes() {
				return new Promise((resolve, reject) => {
					this.get('/device-type/list-without-iot', null).then(res => {
						res.data.obj.forEach(async (x, index) => {
							await this.get('/device/list', {
								typeId: x.id,
								positionId: this.positionId
							}).then(resp => {
								x.devices = resp.data.obj;
								if (index == res.data.obj.length - 1) {
									this.deviceTypes = res.data.obj;
									resolve(res.data.obj);
								}
							})
						})
					}).catch(err => {
						reject(err);
					})
				})
			},
			sendCode(sendToId, codeId) {
				this.loading = true;
				this.post("/send-code/one", {
					sendToId,
					codeId
				}).then(res => {
					this.loading = false;
				}).catch(e => {
					this.loading = false;
				})
			},
			sendAll(toOpen) {
				this.loading = true;
				this.deviceTypes.forEach(async (x, index) => {
					var sendToIds = [];
					x.devices.forEach(x => {
						sendToIds.push(x.id);
					});
					await this.post("/send-code/all", {
						toOpen,
						deviceTypeId: x.id,
						sendToIds: JSON.stringify(sendToIds)
					}).then(res => {
						if (index == this.deviceTypes.length) {
							this.loading = false;
						}
					}).catch(e => {
						this.loading = false;
						return false;
					})
				})

			},
			getCodes(res) {
				return new Promise((resolve, reject) => {
					res.forEach((x, i) => {
						this.get("/code-type/list-counted", {
							deviceTypeId: x.id
						}).then(result => {
							this.$set(this.codeTypes, x.id, result.data.obj);
						})
					})
					console.log(this.codeTypes);
				})
			}
		},
		mounted() {
			// #ifdef APP-PLUS
			// plus.screen.lockOrientation("landscape");
			// // #endif
			// this.getDeviceTypes().then((res) => {
			// 	this.getCodes(res);
			// })
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>
